<template>
  <el-card>
    <template #header>
      <div class="flex">
        <div class="flex1">审核机构</div>
      </div>
    </template>
    <el-steps :active="status != 0 ? 3 : 2" align-center>
      <el-step title="提交入驻信息" />
      <el-step title="平台审核" />
      <el-step title="审核通过" description="通过入驻账号登录机构端管理系统" />
    </el-steps>
    <el-result
      v-if="status == 2"
      icon="success"
      title="审核通过！"
      sub-title="机构通过入驻账号登录机构端管理系统即可！"
    >
      <template #extra>
        <el-button type="primary" @click="onSee">查看机构信息</el-button>
      </template>
    </el-result>
    <el-result
      v-if="status == 1"
      icon="error"
      title="审核不通过！"
      sub-title="请尽快通过微信、电话与机构联系人沟通！"
    >
      <template #extra>
        <el-button type="primary" @click="onSee">查看机构信息</el-button>
      </template>
    </el-result>
    <el-form
      v-if="status == 0"
      ref="formRef"
      v-loading="loading"
      :model="formData"
      label-width="160px"
      :rules="formRules"
      class="page"
    >
      <el-form-item label="机构性质" prop="organizationId">
        <tag :value="data?.resourceType" type="orgResourceType"></tag>
      </el-form-item>
      <el-form-item label="所在城市" prop="organizationId">
        {{ data?.provinceName }}省 {{ data?.cityName }}市
        {{ data?.areaName }}
      </el-form-item>
      <el-form-item label="公司名称" prop="realName">
        {{ data?.organizationName }}
      </el-form-item>
      <el-form-item label="营业执照" prop="sex">
        <el-image
          :src="data?.businessLicense"
          :preview-src-list="[data?.businessLicense]"
        ></el-image>
      </el-form-item>
      <el-form-item label="法人身份证号" prop="phone">
        {{ data?.corporateIdCard }}
      </el-form-item>
      <el-form-item label="身份证正反面" prop="countryName">
        <div>
          <div>
            <el-image
              :src="data?.corporateIdCardF"
              :preview-src-list="[data?.corporateIdCardF]"
            ></el-image>
          </div>
          <el-image
            :src="data?.corporateIdCardO"
            :preview-src-list="[data?.corporateIdCardO]"
          ></el-image>
        </div>
      </el-form-item>
      <el-form-item label="联系人" prop="status">
        {{ data?.contactsName }}
      </el-form-item>
      <el-form-item label="联系方式" prop="status">
        {{ data?.contactsPhone }}
      </el-form-item>
      <el-form-item label="合同编号" prop="status">
        {{ data?.contractNo }}
      </el-form-item>
      <el-form-item label="签约合同" prop="status">
        <a type="link" target="_black" :href="data?.contractUrl">
          {{ data?.contractUrl }}
        </a>
      </el-form-item>
      <el-form-item label="申请人" prop="status">
        {{ data?.applicantName }}
      </el-form-item>
      <el-form-item label="申请时间" prop="status">
        {{ data?.createTime }}
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <tag
          :value="data?.auditingStatus"
          type="auditingStatus"
          style="min-width: 68px"
        ></tag>
      </el-form-item>
      <div v-if="data">
        <!-- 未审核 -->
        <div v-if="data.auditingStatus == 0">
          <el-form-item label="审核是否通过" prop="auditingStatus">
            <CRadio
              constKey="auditingStatus2"
              v-model="formData.auditingStatus"
            />
          </el-form-item>

          <el-form-item label="打回理由" prop="status">
            <el-input
              v-model="formData.auditingReason"
              :rows="2"
              type="textarea"
              placeholder="请输入打回理由"
            />
            <div style="color: red">
              *此处只做线上痕迹保留，无论是否审核通过，强烈建议通过微信、电话告知机构联系人!
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm"> 提交 </el-button>
            <el-button @click="$router.back()">取消 </el-button>
          </el-form-item>
        </div>
        <!-- 已通过 -->
        <div v-if="data.auditingStatus == 2">
          <el-form-item label="审核时间" prop="status">
            {{ data?.updateTime }}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$router.back()"
              >我知道了
            </el-button>
          </el-form-item>
        </div>
        <!-- 美通过 -->
        <div v-if="data.auditingStatus == 1">
          <el-form-item label="审核时间" prop="status">
            {{ data?.updateTime }}
          </el-form-item>
          <el-form-item label="打回理由" prop="status">
            <el-input
              disabled
              :value="data?.auditingReason || ' '"
              :rows="2"
              type="textarea"
              placeholder="请输入打回理由"
            />
            <div style="color: red">
              *此处只做线上痕迹保留，无论是否审核通过，强烈建议通过微信、电话告知机构联系人!
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="$router.back()"
              >我知道了
            </el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import API from '@/api/api';
import { useMessage } from '@/hooks/useMessage';
import { createRequireRole } from '@/utils/rules';
import { useRequest } from 'vue-hooks-plus';
// 0 正常状态   1 提交审核是失败 2 提交审核成功
const status = ref(0);
const formRules = reactive({
  auditingStatus: [createRequireRole()],
});
const formData = reactive({});
const formRef = ref(); // 表单 Ref

const route = useRoute();
const message = useMessage(); // 消息弹窗

const submitReq = useRequest(
  async (sendData: any) => {
    return API.organizationController.auditing({
      id: route.query.id,
      ...sendData,
    });
  },
  {
    manual: true,
  }
);
function onSee() {
  status.value = 0;
  refresh();
}
const submitForm = async () => {
  // 校验表单
  if (!formRef) return;

  const valid = await formRef.value.validate();
  if (!valid) {
    return;
  }

  await submitReq.runAsync(formData);
  status.value = formData.auditingStatus;
  message.success('提交成功!');
};

const { data, loading, refresh } = useRequest(
  async () => {
    return API.organizationController.info({
      organizationId: route.query.id,
    });
  },
  {
    ready: !!route.query.id,
  }
);
const fileList = [
  {
    name: 'data.value?.contractUrl',
    url: data.value?.contractUrl,
  },
];
</script>
